<template>
	<view class="content">
		<!-- 菜单 -->
		<view class="top-warp">
			<me-tabs v-model="tabIndex" :tabs="tabs" :height="80" @change="tabChange"></me-tabs>
		</view>
		<mescroll-uni :fixed="false" top="100" height="100%" ref="mescrollRef" @init="mescrollInit" :up="upOption"
			@down="downCallback" @up="upCallback">
			<view class="item" v-for="(item,index) in list" :key="index">
				<template v-if="userInfo.memberRole=='member'">
					<view class="item-title">
						<text class="order-no">订单编号: {{item.orderSn}}</text>
						<text class="integral0" v-if="item.dialog_stage==0">待咨询</text>
						<text class="integral1" v-if="item.dialog_stage==1">已发咨询</text>
						<text class="integral2" v-if="item.dialog_stage==2">首次回复</text>
						<text class="integral3" v-if="item.dialog_stage==3">对话中</text>
						<text class="integral4" v-if="item.dialog_stage==4">已结束</text>
					</view>
					<view class="item-info">
						<image class="avatar" :src="item.planerAvatar"></image>
						<view class="info">
							<view class="name-price">
								<text class="name">{{item.planerName}}</text>
								<text class="price">¥{{item.amount}}</text>
							</view>
							<view class="times">
								<text class="yzb yzb-shijian"></text>
								<text>在线咨询：60分钟</text>
							</view>
						</view>
					</view>
					<view class="item-li">
						<text class="time">{{item.create_time}}</text>
						<text v-if="item.dialog_stage!=4" class="btn-start" @click="toChat(item)">开始咨询</text>
					</view>
				</template>
				<template v-else-if="userInfo.memberRole=='planer'">
					<view class="item-title">
						<text class="order-no">订单编号: {{item.orderSn}}</text>
						<text class="integral0" v-if="item.dialog_stage==0">待咨询</text>
						<text class="integral1" v-if="item.dialog_stage==1">已发咨询</text>
						<text class="integral2" v-if="item.dialog_stage==2">首次回复</text>
						<text class="integral3" v-if="item.dialog_stage==3">对话中</text>
						<text class="integral4" v-if="item.dialog_stage==4">已结束</text>
					</view>
					<view class="item-info">
						<image class="avatar" :src="item.userAvatar"></image>
						<view class="info">
							<view class="name-price">
								<text class="name">{{item.userName}}</text>
								<text class="price">¥{{item.amount}}</text>
							</view>
							<view class="times">
								<text class="yzb yzb-shijian"></text>
								<text>在线咨询：60分钟</text>
							</view>
						</view>
					</view>
					<view class="item-li">
						<text class="time">{{item.create_time}}</text>
						<text v-if="item.dialog_stage!=4" class="btn-start" @click="toChat2(item)">进入咨询</text>
					</view>
				</template>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {
				clickable: true,
				list: [],
				tabs: [{name:'全部',status:'0'}, {name:'进行中',status:'1'}, {name:'已完成',status:'2'}],
				tabIndex: 0 ,// tab下标
				upOption: {
					onScroll: true,
					auto: false, // 不自动加载
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						tip: '空空如也', // 提示
						icon: 'http://cdn.uviewui.com/uview/empty/data.png'
					}
				},
				query:{
					pageNo: 1,
					pageSize: 10,
					memberId: '',
					memberRole:'',
					type:0,
				}
			};
		},
		
		filters: {
			//对话阶段：0-待使用，1-用户发起，2-首次回复，3-对话中，4-结束对话。
			formatStatus(val) {
				if (val == 0) {
					return '待咨询';
				} else if (val == 1) {
					return '已发咨询';
				} else if (val == 2) {
					return '首次回复';
				}else if (val == 3) {
					return '对话中';
				}else if (val == 4) {
					return '已结束';
				}
			}
		},
		
		onLoad() {},

		onShow() {},

		methods: {
			
			toChat(item){
				this.$mRouter.push({
					route: this.$mRoutesConfig.planChat,
					query: {
						memberId: item.planer_id,
						role:this.userInfo.memberRole
					}
				});
			},
			
			toChat2(item){
				//
				if(item.dialog_stage > 1){
					uni.showToast({
						icon:'none',
						title:"待用户先发起咨询"
					})
					return;
				}
				this.$mRouter.push({
					route: this.$mRoutesConfig.planChat,
					query: {
						memberId: item.member_id,
						role:this.userInfo.memberRole
					}
				});
			},
			
			getOrderList(pageNum, pageSize) {
				this.query.pageNo=pageNum;
				this.query.pageSize=pageSize;
				this.query.memberId=this.userInfo.id;
				this.query.memberRole=this.userInfo.memberRole;
				this.$apis.getPlanOrderList(this.query).then(res => {
					console.log('getPlanOrderList', res);
					if (pageNum == 1) {
						this.list = [];
					}
					if (res) {
						let data = res.records;
						this.list = this.list.concat(data);
						this.mescroll.endSuccess(res.records.length);
					}
				});
			},
			
			// 切换菜单
			tabChange(index) {
				this.query.type=index;
				this.list = []// 先置空列表,显示加载进度
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				// this.mescroll.endSuccess(2);
				this.getOrderList(page.num, page.size);
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	view {
		flex: 1;
	}

	.content {
		flex: 1;
		flex-direction: column;
		align-items: center;
		height: 100vh;
		box-sizing: border-box;
	}

	.top-warp {
		z-index: 9990;
		position: fixed;
		top: --window-top;
		/* css变量 */
		left: 0;
		width: 100%;
		background-color: white;
	}

	.top-warp .tip {
		font-size: 28upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
	}


	.item {
		display: flex;
		flex-direction: column;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		flex: 1;
		padding: 20upx;
		margin: 0 20upx;

		.item-title {
			font-weight: bold;
			font-size: 32upx;
			color: #000;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.integral0 {
				color: red;
			}
			.integral1 {
				color: #007aff;
			}
			.integral2 {
				color: #007aff;
			}
			.integral3 {
				color: #007aff;
			}
			.integral4 {
				color: #999;
			}

			.order-no {
				font-size: 26upx;
				color: #999;
			}
		}
		
		.item-info{
			padding: 20upx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.avatar{
				width: 100upx;
				height: 100upx;
				border-radius: 10upx;
			}
			
			.info{
				margin-left: 20upx;
				.name-price{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					.name{
						font-size: 30upx;
						font-weight: bold;
					}
				}
				.times{
					display: flex;
					flex-direction: row;
					align-items: center;
					text{
						color: #666;
					}
					.yzb{
						color: #666;
						font-size: 30upx;
					}
				}
			}
		}

		.item-li {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			
			.time{
				color: #999;
				font-size: 26upx;
			}
			.btn-start{
				// background-color: #007aff;
				background-image: linear-gradient(90deg, #7FB6FF, #7FBBFF);
				color: #fff;
				height: 60upx;
				line-height: 60upx;
				width: 160upx;
				border-radius: 30upx;
				font-size: 28upx;
				text-align: center;
			}
		}

		.yzb {
			margin-right: 8upx;
		}
	}
</style>